<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
    on iOS devices-->
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>a</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      li {
        list-style: none;
      }
      .floatfix {
        *zoom: 1;
      }
      .floatfix:after {
        content: "";
        display: table;
        clear: both;
      }
      .slider-contaner {
        width: 100%;
        position: relative;
      }
      .slider,
      .slider-item {
        padding-bottom: 40%;
      }
      .slider-item {
        width: 100%;
        position: absolute;
        animation-timing-function: linear;
        animation-name: fade;
        animation-iteration-count: infinite;
        animation-duration: 20s;
        background-size: 100%;
      }
      .slider-item1 {
        background-image: url(./imgs/1.png);
      }
      .slider-item2 {
        background-image: url(./imgs/2.png);
      }
      .slider-item3 {
        background-image: url(./imgs/3.png);
      }
      .slider-item4 {
        background-image: url(./imgs/4.png);
      }
      .slider-item5 {
        background-image: url(./imgs/5.png);
      }
      @keyframes fade {
        0% {
          opacity: 0;
          z-index: 2;
        }
        5% {
          opacity: 1;
          z-index: 1;
        }
        20% {
          opacity: 1;
          z-index: 1;
        }
        25% {
          opacity: 0;
          z-index: 0;
        }
        100% {
          opacity: 0;
          z-index: 0;
        }
      }
      .slider-item + .slider-item {
        opacity: 0;
      }
      .slider-item1 {
        animation-delay: -1s;
      }
      .slider-item2 {
        animation-delay: 3s;
      }
      .slider-item3 {
        animation-delay: 7s;
      }
      .slider-item4 {
        animation-delay: 11s;
      }
      .slider-item5 {
        animation-delay: 15s;
      }

      .a {
        width: 600px;
        height: 600px;
        background-color: red;
        animation: key 5s ease-in-out 0s infinite normal none;
      }
      @keyframes key {
        0%{
          transform: rotate(0deg);
        }
        
        50%{
          transform: rotate(180deg);
        }
        
        100%{
          transform: rotate(360deg);
        }
      }
      .b {
        background-color: blue;
        width: 200px;
        height: 200px;
        float: left;
      }
      .d{
        color: red;
        transform: matrix();
      }
      
      
      /* .a::after{
        content: '';
        display: block;
        clear: both;
      } */
    </style>
  </head>

  <body class="main">
    <form action="index2.html" >
      <input type="submit" name="" id="" />
    </form>
    
    <progress />
    <meter></meter>
  </body>
  <script>
    
  </script>
</html>
